<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <!--以最新的IE浏览器引擎去渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!--如果是双核浏览器，则使用webkit内核渲染-->
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title></title>
    <meta name="description" content=""/>
    <meta name="keyword" content=""/>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/mystyle.css" />
    <link rel="stylesheet" href="__PUBLIC__/frame/layui/css/layui.css">
    <link rel="stylesheet" href="__PUBLIC__/frame/static/css/style.css">
    <script type="text/javascript" src="__PUBLIC__/js/jquery1.12.4.js"></script>
    <script type="text/javascript" src="__PUBLIC__/frame/layui/layui.js"></script>
    <link rel="icon" href="__PUBLIC__/frame/static/image/code.png">

    <script type="text/javascript" src="__PUBLIC__/frame/echarts/echarts.min.js"></script>
    <style type="text/css">
        #c{ margin: 0 auto; display: block; } #r{ display: block; margin: 0 auto;
        } #r::before{ color: black; content: attr(min); padding-right: 10px; }
        #r::after{ color: black; content: attr(max); padding-left: 10px; }
    </style>
</head>
<body>
<div class="right">
    <div class="mg20">
        <div class="rentileft_up box">
            <div class="renti_biaoti">
                <div class="renti_xian">
                    <h1>基础信息</h1>
                </div>
            </div>
            <div class="jcxx_body">
                <div class="layui-row">
                    <div class="layui-col-md1">&nbsp;</div>
                    <div class="layui-col-md4">
                        <ul>
                            <li>
                                <div class="linejg">姓名:
                                    <div class="jibenxx">
                                        <p class="renti_xxu">张三</p>
                                    </div>
                                </div>
                            </li> 
                            <li>
                                <div class="linejg">性别:
                                    <div class="jibenxx">
                                        <p class="renti_xxu">男</p>
                                    </div>
                                </div>
                            </li> 
                            <li>
                                <div class="linejg">出生日期:
                                    <div class="jibenxx">
                                        <p class="renti_xxu">1996.09.03</p>
                                    </div>
                                </div>
                            </li> 
                            <li>
                                <div class="linejg">民族:
                                    <div class="jibenxx">
                                        <p class="renti_xxu">汉</p>
                                    </div>
                                </div>
                            </li> 
                            <li>
                                <div class="linejg">籍贯:
                                    <div class="jibenxx">
                                        <p class="renti_xxu">北京市</p>
                                    </div>
                                </div>
                            </li> 
                            <li>
                                <div class="linejg">学历:
                                    <div class="jibenxx">
                                        <p class="renti_xxu">小学</p>
                                    </div>
                                </div>
                            </li> 
                            <li>
                                <div class="linejg">职业:
                                    <div class="jibenxx">
                                        <p class="renti_xxu">保安</p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="linejg">现住址:
                                    <div class="jibenxx">
                                        <p class="renti_xxu">北京市</p>
                                    </div>
                                </div>
                            </li>  
                        </ul>
                    </div>
                    <div class="layui-col-md2">&nbsp;</div>
                    <div class="layui-col-md3">
                        <img src="__PUBLIC__/images/zhengjian.png"height="100%"width="100%"/>
                    </div>
                    <div class="layui-col-md2">&nbsp;</div>
                </div>
            </div>
        </div>
        <div class="rentiright_upl box">
            <div class="renti_biaoti">
                <div class="renti_xian">
                    <h1>活动重复度</h1>
                </div>
            </div>
            <div class="layui-progress layui-progress-big" style="border-radius: 0px;margin: 0 10px;">
                <div class="layui-progress-bar layui-bg-blue"  style="border-radius: 0px;width: 50%" lay-percent="50%"><span style="float: left;">网吧上网</span></div>
            </div>
            <div class="layui-progress layui-progress-big" style="border-radius: 0px;margin: 6px 10px;">
                <div class="layui-progress-bar layui-bg-blue"  style="border-radius: 0px;width: 20%" lay-percent="20%"><span style="float: left;">公交</span></div>
            </div>
            <div class="layui-progress layui-progress-big" style="border-radius: 0px;margin: 6px 10px;">
                <div class="layui-progress-bar layui-bg-blue"  style="border-radius: 0px;width: 15%" lay-percent="15%"><span style="float: left;">地铁</span></div>
            </div>
            <div class="layui-progress layui-progress-big" style="border-radius: 0px;margin: 6px 10px;">
                <div class="layui-progress-bar layui-bg-blue"  style="border-radius: 0px;width: 15%" lay-percent="15%"><span style="float: left;">酒店</span></div>
            </div>
        </div>
        <div class="rentiright_upr box">
            <div class="renti_biaoti">
                <div class="renti_xian">
                    <h1>危险程度</h1>
                </div>
                <canvas id="c"></canvas>
                <input type="range" id="r" min="0" max="100" step="1">
            </div>
        </div>
        <div class="clear"></div> 
    </div> 

    <div class="mg20">
        <div class="rentileft_down box">
            <div class="renti_biaoti">
                <div class="renti_xian">
                    <h1>不良记录</h1>
                </div>
            </div>
            <table  style="display: table;" class="layui-table" lay-skin="line">
                <thead>
                <tr>
                    <th width="25%">序号</th>
                    <th  width="25%">事件</th>
                    <th width="25%">地点</th>
                    <th width="25%">时间</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>盗窃</td>
                    <td>北京市</td>
                    <td>2017.8</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>斗殴</td>
                    <td>北京市</td>
                    <td>2017.3</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="rentiright_down box">
            <div class="renti_biaoti">
                <div class="renti_xian">
                    <h1>人体画像</h1>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md4"><img src="__PUBLIC__/images/renti.png" width="150px" height="150px" style="padding-top: 60px"></div>
                <div class="layui-col-md8">
                    <div id="liubianxing" style="height: 250px;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="mg20">
        <div class="rentifoot"></div>
    </div>
</div>

<script type="text/javascript">
    var canvas = document.getElementById('c');
    var ctx = canvas.getContext('2d');
    var range = document.getElementById('r');

    //range控件信息
    var rangeValue = range.value;
    var nowRange = 0; //用于做一个临时的range
    //画布属性
    var mW = canvas.width = 140;
    var mH = canvas.height = 140;
    var lineWidth = 2;

    //圆属性
    var r = mH / 2; //圆心
    var cR = r - 16 * lineWidth; //圆半径
    //Sin 曲线属性
    var sX = 0;
    var sY = mH / 2;
    var axisLength = mW; //轴长
    var waveWidth = 0.015; //波浪宽度,数越小越宽 
    var waveHeight = 6; //波浪高度,数越大越高
    var speed = 0.09; //波浪速度，数越大速度越快
    var xOffset = 0; //波浪x偏移量
    ctx.lineWidth = lineWidth;

    //画圈函数
    var IsdrawCircled = false;
    var drawCircle = function() {

        ctx.beginPath();
        // ctx.strokeStyle = '#1080d0';  原来的
        ctx.strokeStyle = '999999';
        ctx.arc(r, r, cR + 0, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(r, r, cR, 0, 2 * Math.PI);
        ctx.clip();

    }

    //画sin 曲线函数
    var drawSin = function(xOffset) {
        ctx.save();

        var points = []; //用于存放绘制Sin曲线的点
        ctx.beginPath();
        //在整个轴长上取点
        for (var x = sX; x < sX + axisLength; x += 20 / axisLength) {
            //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
            var y = -Math.sin((sX + x) * waveWidth + xOffset);

            var dY = mH * (1 - nowRange / 100);

            points.push([x, dY + y * waveHeight]);
            ctx.lineTo(x, dY + y * waveHeight);
        }

        //封闭路径
        ctx.lineTo(axisLength, mH);
        ctx.lineTo(sX, mH);
        ctx.lineTo(points[0][0], points[0][1]);
        // ctx.fillStyle = '#1c86d1'; 原来的
        ctx.fillStyle = '#ff0000';
        ctx.fill();

        ctx.restore();
    };

    //写百分比文本函数
    var drawText = function() {
        ctx.save();

        var size = 0.4 * cR;
        ctx.font = size + 'px Microsoft Yahei';
        ctx.textAlign = 'center';
        ctx.fillStyle = "rgba(06, 85, 128, 0.8)";
        ctx.fillText(~~nowRange + '%', r, r + size / 2);

        ctx.restore();
    };

    var render = function() {
        ctx.clearRect(0, 0, mW, mH);

        rangeValue = range.value;

        if (IsdrawCircled == false) {
            drawCircle();
        }

        if (nowRange <= rangeValue) {
            var tmp = 1;
            nowRange += tmp;
        }

        if (nowRange > rangeValue) {
            var tmp = 1;
            nowRange -= tmp;
        }

        drawSin(xOffset);
        drawText();

        xOffset += speed;
        requestAnimationFrame(render);
    }

    render();
</script>
<script>
    var dom = document.getElementById("liubianxing");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title: {
            text: ''
        },
        tooltip: {},
        legend: {
            data: ['六边形人体画像']
        },
        radar: {
            // shape: 'circle',
            name: {

            },
            indicator: [
               { name: '既往履历', max: 100},
               { name: '消费水平', max: 100},
               { name: '婚姻状况', max: 100},
               { name: '学历', max: 100},
               { name: '活动范围', max: 100},
               { name: '活动规律', max: 100}
            ]
        },
        series: [{
            name: '',
            type: 'radar',
            // areaStyle: {normal: {}},
            data : [
                {
                    value : [30, 20, 50, 10, 40, 15],
                    name : '六边形人体画像哈哈'
                }
            ]
        }]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>